.tl-wrapper {
    font-size: 12px;
    position: relative;
    width: 100%;
    height: 0;
    opacity: 0;
    visibility: hidden;
    box-sizing: border-box;
    overflow: hidden;
    transition: height .5s ease, visibility .5s ease, opacity .5s ease;
    user-select: none;
    &.is-ready {
        opacity: 1;
        visibility: visible;
    }
}

.tl-timeline {
    background: #333;
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 1000;
    min-height: 20px;
    user-select: none;
    transition: opacity ease .2s;
    &__title {
        color: #fff;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        line-height: 1em;
        font-size: 1em;
        padding: 4px 10px;
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 1000;
    }
    &__date-start,
    &__date-end {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        left: 0;
        top: -100%;
        background: #000;
        background: rgba(0,0,0,.95);
        color: #FFF;
        padding: 2px 5px;
        display: inline-block;
        pointer-events: none;
        transition: opacity ease .2s 0s, visibility ease .2s 0s;
        &:before {
            content: "";
            height: 2px;
            width: 2px;
            background: #000;
            background: rgba(0,0,0,.95);
            position: absolute;
            left: 0;
            bottom: -2px;
        }
    }
    %pushRight {
        left: auto;
        right: 0;
    }
    &__date-end {
        @extend %pushRight;
        &:before {
            @extend %pushRight;
        }
    }

    &__resizer-start,
    &__resizer-end {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 6px;
        background: #666;
        cursor: w-resize;
        opacity: 0;
        white-space: nowrap;
        visibility: hidden;
        transition: opacity ease .2s;
        &:hover {
            opacity: 1;
        }
    }
    &__resizer-end {
        @extend %pushRight;
        cursor: e-resize;
    }

    &__phase-line {
        height: 1px;
        background-color: #333;
        position: absolute;
        width: 100%;
        bottom: 50%;
    }

    &__color-bar {
        order: 0;
        flex: 1 1 auto;
        align-self: auto;
        z-index: 0;
        height: 20px;
    }

    &.has-color-bars {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: stretch;
    }

    &.is-hovered:not(.tl-has-phases) {
        z-index: 2000 !important;
        .tl-timeline__date-marker {
            opacity: 1;
            visibility: visible;
            z-index: 10000;
            white-space: nowrap;
            transition-delay: .25s;
        }
    }
    &.is-dragging {
        z-index: 10005 !important;
    }
    &.is-resizeable {
        .tl-timeline__resizer {
            visibility: visible;
        }
    }
    &.tl-has-phases {
        background: transparent;
        &.tl-overflow-left {
            left: 0 !important;
        }
    }
    &.tl-point {
        width: 26px  !important;
        height: 26px !important;
        border: 3px solid #fff;
        border-radius: 50%;
        transform: translate(-50%, 2px);
        z-index: 2002 !important;

        .tl-timeline__title {
            display: none;
        }

        .tl-timeline__date-marker {
            display: none !important;
        }

        &.tl-overflow-right {
            transform: none;
        }
    }
}

.tl-time {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1em;
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 1em;
    border-top: 1px solid #333;
    box-sizing: border-box;
    user-select: none;
    &:after {
        content: "";
        display: inline-block;
        width: 100%;
        height: 0;
    }
    &__unit {
        display: inline-block;
        text-align: center;
        position: absolute;
        line-height: 1;
        transform: translateX(-50%);
        span {
            background: #aaa;
            background: rgba(0,0,0,.1);
            left: 50%;
            width: 1px;
            height: 200px;
            top: -200px;
            position: absolute;
        }
        &.is-today {
            color: #f00;
            span {
                background: #f00;
            }
        }
    }
}
